<template>
	<!-- tempate下有且只能有一个根标签 -->
	<view>
		<view class="header">
			<view>
				<image class="icon" src="../../static/image/icon_cha.png">已经收藏{{cardList.length}}个餐宴</image>
			</view>
			<view>
				<image @click="empty" class="icon" src="../../static/image/icon_clear.png">清空</image>
			</view>
		</view>
		<view class="list">
			<WishcardV2 :wishData="item" v-for="item in cardList"></WishcardV2>

		</view>
	</view>
</template>

<script>
	//1.引入自定义组件
	import WishcardV2 from "../../uni_modules/wishcardV2/wishcardV2.vue"

	import {
		cardlist
	} from "../../mock/goods.json"
	//2.
	export default {
		components: {
			WishcardV2
		},
		data() {
			return {
				cardList: []
			}
		},
		//页面加载马上执行方法
		created() {
			console.log(this),
				this.querData()
		},
		methods: {
			querData() {
				setTimeout(() => {
					this.cardList = cardlist;
					console.log(this.cardList, "15.53")
				}, 1000)


			},
			empty() {
				console.log(this,"16.53")
				this.cardList=[]
			},
		},
		onPullDownRefresh() {
			console.log('下拉顶部刷新');
					this.querData();
				},
				onReachBottom() {
					uni.showLoading({
						title: "正在努力加载中"
					})

					console.log('下拉到底部刷新');
					setTimeout(() => {
						let nextPageData = [{
								"id": 4,
								"title": "麻辣小龙虾",
								"imgUrl": "../../static/image/goods4.png",
								"price": 999
							},
							{
								"id": 5,
								"title": "和牛拉面",
								"imgUrl": "../../static/image/goods1.jpg",
								"price": 999
							},
							{
								"id": 6,
								"title": "避风塘炒蟹",
								"imgUrl": "../../static/image/goods3.jpg",
								"price": 999
							}
						]
						this.cardList = [...this.cardList, ...nextPageData]
						uni.hideLoading();
					}, 1000)
				}

			}
</script>

<style lang="less">
	.header {
		margin-top: -10rpx;
		width: 690rpx;
		height: 40rpx;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		.icon {
			width: 25rpx;
			height: 25rpx;
		}
	}

	.list {
		padding: 30rpx;
		box-sizing: border-box;

		.list-item {
			box-shadow: 5px 5px 5px #ccc;
			margin-bottom: 30rpx;

			.img {
				width: 100%;
				height: 375rpx;
				border-radius: 20rpx;
			}

			.content {
				display: flex;
				justify-content: space-between;

				.content-left {
					.title {
						font-weight: bold;
						font-size: 38rpx;
					}

					.price {
						color: red;
						font-size: 30rpx;
					}
				}

				.content-right {
					.icon {
						padding-left: 40rpx;
						width: 30rpx;
						height: 30rpx;
					}

					.text {
						font-size: 30rpx;
						color: #ccc;
						padding-right: 30rpx;
					}
				}
			}
		}
	}
</style>
